/*CSS3部分*/
.rad{
    width:655px;
    height:120px;
    margin:0 auto;
    background-color:#cccccc;
    background: linear-gradient(45deg,red, blue);/*设置渐变背景*/
    border:2px solid #ff0000;
    border-radius:10px; /*CSS3边框圆角功能*/
    
    
}

.bgImg{
    width:655px;
    height:200px;
    background-image:url('../img/00003.png'),url('../img/00101.png'); /*设置多张背景图片*/
    background-position:left top,right; /*设置多张图片的位置*/
    background-repeat:no-repeat;
}

/*
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
*/

/*
线性渐变函数linear-gradient()的用法

1. 只有颜色: linear-gradient(red, blue)
2. 设置方向: linear-gradient(to bottom right, red , blue) 方向定义(to bottom、to top、to right、to left、to bottom right等等)
3. 使用角度:linear-gradient(45deg, red, blue); 顺时针旋转
4. 设置多个颜色点:linear-gradient(red, green, blue);
5. 使用透明度：linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) rgba函数设置透明度
*/
.img1{
    display:inline;
    visibility:show;
    border-radius:20px; /*设置图片圆角*/
}

/*CSS3设置文本效果*/
#boxShadow span {
    text-shadow:0px 2px 3px #ffff00;/*设置阴影参数顺序:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色*/
    
}

#boxShadow{
    box-shadow:5px 5px 15px #dddddd;/*盒子阴影:参数同 text-shadow */
    width:300px;
    height:80px;
    display:inline-block;
    background-color:#f6c87b;        
    transform:rotate(45deg); /*顺时针旋转45度*/   
    transform:skew(30deg,20deg);/*倾斜函数*/
    transform:translate(50px,50px); /*向右移动50px,向下移动50px*/
    transform:scale(0.9); /*缩放函数*/
}

/*
transform属性后面执行的会覆盖前面的 想一次执行多个函数应该：
transform:scale(0.5) rotate(45deg) translate(10px,50px); 这样写

transform:matrix(0.866,0.5,-0.5,0.866,0,0);6个参数顺序:旋转，缩放，移动（平移）和倾斜
*/

/*过渡动画transition属性*/
#mc{
    box-shadow:5px 5px 15px #dddddd;/*盒子阴影:参数同 text-shadow */
    width:100px;
    height:100px;
    display:inline-block;
    background-color:#d1d0a8; 
    transition:transform 1s,width 1s; /*语法：设置一个或者多个属性(逗号隔开)设置过渡时间*/
    transition-timing-function:ease-out;
}
#mc:hover{
    transform:translate(100px,0px);
    width:150px;
}


/*css3动画animation属性*/

@keyframes action1{
    from{
        
    }
    to{
        transform:translate(100px,0px) scale(0.5);        
    }    
}

@keyframes runAround{    
    0% {left:0px;top:0px}
    25% {left:150px;top:0px}
    50% {left:150px;top:-100px}
    75% {left:0px;top:-100px}
    100% {left:0px;top:0px}
    
}

#mcMotion{
    box-shadow:5px 5px 15px #dddddd;/*盒子阴影:参数同 text-shadow */
    width:100px;
    height:100px;
    display:inline-block;
    background-color:#ffff00;
    text-align:center;
  
}

#mcMotion:hover{
    animation:action1 3s;
}

#mcMotion2{
    box-shadow:1px 1px 1px #ffff00;
    background-color:#f6c87b;
    width:150px;
    height:150px;
    position:relative;
    animation:runAround 2s;
    display:inline-block;
}
#mcMotion2 span{
    /*display:block;*//*行块元素:具有块元素的属性,但是还是以行内元素显示*/
    /*margin:30px 0px; */   /*行内元素的话margin和padding只有上下有效*/
    margin:0 auto;
    padding:0 auto;   
    text-align:center;
    color:#ff0000;    
    width:150px;  
    
    
}
#mcMotion2 span{
    /*display:block;*//*行块元素:具有块元素的属性,但是还是以行内元素显示*/
    /*margin:30px 0px; */   /*行内元素的话margin和padding只有上下有效*/
    margin:0 auto;
    padding:0 auto;   
    text-align:center;
    color:#ff0000;    
    width:150px;      
    display:inline-block;
}
#test{
    background-color:#cccccc;
    width:150px;
    height:150px;
    vertical-align:middle;
    display:table-cell;    
    padding:0 0.1em; 
    border:4px solid #beceeb; 
    color:#069; 
    display:inline-block;
    
}
#test span{
    display:inline-block;    
    vertical-align:middle;
}

